<template>
    <div :id="chartID+'_'+id" style="width: 100%;height:400px;"></div>
</template>

<script>
    export default {
        name: "circuit_e_current",
        props: {
            id: {default: '0'},
            name: {default: '电流'},
            threshold: {default: 10,},
            xData: {
                default: () => {
                    return ['1']
                }, type: Array
            },
            yData: {
                default: () => {
                    return [0]
                }, type: Array
            }
        },//type: Number
        data() {
            return {
                chartID: 'e_current',
                myChart: null
            }
        },
        methods: {
            drawChart() {
                const _this = this
                // 基于准备好的dom，初始化echarts实例
                this.myChart = this.$echarts.init(document.getElementById(this.chartID + '_' + this.id));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        // text: _this.name + '电流'
                    },
                    tooltip: {},
                    legend: {
                        data: [_this.name]
                    },
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false,
                        // axisLine: {onZero: true},
                        data: _this.xData,
                    },

                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'line',
                        // symbolSize: 8,
                        // hoverAnimation: false,
                        data: _this.yData,
                        markLine: {
                            symbol: ['none', 'none'], //去掉箭头
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                        type: 'dashed',
                                        color: '#ccc',
                                        width: 2
                                    }
                                },
                            },
                            data: [{
                                name: '阈值：' + _this.threshold,
                                yAxis: _this.threshold,
                                label: {
                                    normal: {
                                        formatter: '(阀值) ' + _this.threshold,
                                    },
                                },
                            },],
                        },
                    }],

                };

                // 使用刚指定的配置项和数据显示图表。
                this.myChart.setOption(option);
            }
        },
        mounted() {
            this.drawChart();
        },
        watch: {
            id(val) {
                // todo:每次改变支路就摧毁echarts
                // this.myChart.dispose()
            },
            threshold(val) {
                let option = this.myChart.getOption()
                option.series[0].markLine.data = [{
                    name: '阈值：' + val,
                    yAxis: val,
                    label: {
                        normal: {
                            formatter: '(阀值) ' + val,
                        },
                    },
                },]
                this.myChart.setOption(option);
            },
            xData(val) {
                let option = this.myChart.getOption()
                option.xAxis.data = val
                this.myChart.setOption(option);
            },
            yData(val) {
                let option = this.myChart.getOption()
                option.series[0].data = val
                this.myChart.setOption(option);
            },
            name(val) {
                let option = this.myChart.getOption()
                option.title.text = val + '电流'
                option.legend.data = [val]
                this.myChart.setOption(option);
            }
        }
    }
</script>

<style scoped>

</style>
